<!-- 定义模版对象 -->
<template>
    <div class="login_container">
      <div class="login_box">
        <!-- 头像区域-->
<!--        <div class="avatar_box">
          <img src="../assets/logo.png" alt="VUE图片" />
        </div> -->

        <!-- 登陆表单区域
              ref代表当前表单引用对象
             :model 是表格中封装的对象
        -->
        <el-form ref="addUserRef" label-width="0" class="login_form" :model="addUserModel" :rules="rules" >
			<div class="ms-title">
			  <div class="logo-container">
			    <img src="../assets/Darway.png"/>
			  </div>
			</div>
          <el-form-item prop="account" >
            <el-input  prefix-icon="iconfont iconuser" v-model="addUserModel.account" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input  prefix-icon="iconfont iconsuo" type="password" v-model="addUserModel.password" placeholder="请输入密码"></el-input>
          </el-form-item>
		  <el-form-item prop="nickname">
		    <el-input  prefix-icon="iconfont iconuser"type="text" v-model="addUserModel.nickname" placeholder="请输入称昵"></el-input>
		  </el-form-item>
		  <el-form-item prop="email">
		    <el-input  prefix-icon="iconfont iconsuo" type="text"  v-model="addUserModel.email" placeholder="请输入邮箱(非必填)"></el-input>
		  </el-form-item>
		  <el-form-item prop="phone">
		    <el-input  prefix-icon="iconfont iconsuo" type="text"  v-model="addUserModel.phone" placeholder="请输入手机号"></el-input>
		  </el-form-item>

			<el-form-item prop="code">
				<div class="verifycode_input" style="float: left;">
					<el-input prefix-icon="el-icon-info" type="text" v-model="addUserModel.code" placeholder="点击刷新验证码">
					</el-input>
				</div>
				<div class="login_code" @click="refreshCode" align="right">
				 <Identify :identifyCode="identifyCode"></Identify>
				</div>

			 </el-form-item>
          <el-form-item class="btns">
             <el-button type="primary" @click="addUserBtn()">注册</el-button>
              <el-button type="info" @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<!-- 定义JS变量 -->
<script>
import Identify from './identify.vue'

export default {
  components: { Identify },
  data () {
	  /* var checkEmail = (rule, value, callback) => {
	        const regEmail = /^([a-zA-Z0-9])+@([a-zA-Z0-9_-])+([a-zA-Z0-9_-])+/;
	        if (regEmail.test(value)) {
	          console.log(regEmail.test(value));
	          return callback();
	        } else {
	          callback(new Error("请输入合法邮箱"));
	        }
	      }; */
		  var checkPhone = (rule, value, callback) => {
		        console.log(typeof value, "\\\\/");
		        const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
		        if (!Number.isInteger(+value)) {
		          callback(new Error("请输入数字值"));
		        } else {
		          if (phoneReg.test(value)) {
		            callback();
		          } else {
		            callback(new Error("电话号码格式不正确"));
		          }
		        }
		      };
    return {
	  identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
	  identifyCode: '',
      addUserModel: {
        account: '',
        password: '',
		nickname:'',
/*        code: '', */
		email:'',
		phone:''
      },
      // 定义表单的验证规则
      rules: {
        // 定义校验用户名
        account: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        // 定义校验密码
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
		nickname: [
		  { required: true, message: '昵称不能为空', trigger: 'blur' },
		  { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
		],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ],
		/* email: [
			{required: true, message: '邮箱不能为空', trigger: 'blur'},
			{validator: checkEmail, trigger: 'blur'},
			], */

		phone: [
		  { required: true, message: '请输入手机号', trigger: 'blur' },
		  { validator: checkPhone, trigger: 'blur' }
		],
      }
    }
  },
  methods: {
    refreshCode () {
	                this.identifyCode = ''
	                this.makeCode(this.identifyCodes, 4)
    },
    makeCode (o, l) {
	                for (let i = 0; i < l; i++) {
	                    this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
	                }
    },
    randomNum (min, max) {
	                return Math.floor(Math.random() * (max - min) + min)
    },
    resetBtn () {
      // this对象代表当前组件对象
      // console.log(this)
      // 实现数据重置
      this.$refs.addUserRef.resetFields()
    },
    addUserBtn(){
      this.$refs.addUserRef.validate(async valid => {
      	if (!valid) return
      	const {
      		data: result
      	} = await this.$http.post('/user/logonUser', this.addUserModel)
      	if (result.status !== 200) return this.$message.error('用户新增失败')
      	this.$message.success('用户新增成功')
		this.$router.push('/signin')
    
      })
    },
    mounted () {
      // 初始化验证码
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    }
	
  }
}
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
	
.login_container{
  background-color: #345b82;
  height: 100%;
}

.logo-container{
	margin-left: 70px;
}

.ms-title{
	margin-left: 5%;
	
}

.login_box {
  width: 600px;
  height: 630px;
  margin-top: 100px;
  /* background-color: #FFFFFF; */
  /* 设定圆弧角*/
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  // .avatar_box {
  //   height: 120px;
  //   width: 120px;
  //   border: 1px solid #EEEEEE;
  //   border-radius: 50%;
  //   padding: 10px;
  //   box-shadow: 0 0 10px #DDDDDD; /* 添加阴影*/
  //   position: absolute;           /* 绝对定位*/
  //   left: 50%;                    /* 距离左侧50%*/
  //   transform: translate(-50%,-50%);   /*回调50%*/
  //   background-color: #FFFFFF;
  //   img {
  //     height: 100%;
  //     width: 100%;
  //     border-radius: 50%;
  //     background-color: #EEEEEE;
  //   }
  // }

  .btns {
    display: flex;
    justify-content: flex-end;

  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
  }

  .verifycode_input{
	width: 75%;
  }

}
</style>
